<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <% include ../../ejs/_meta.ejs %>
    <title>收货信息</title>
    <% include ../../ejs/_css.ejs %>
    <link rel="stylesheet" type="text/css" href="../../css/goods/address.css" inline>
    <link rel="stylesheet" type="text/css" href="../../lib/mobileSelect.css">
</head>

<body class="body-bg" ontouchstart>
<div class="m-page">
    <%-include("../../ejs/_header.ejs", {title: '收货信息'}) %>
    <section class="m-content">
        <div class="m-address selected">
            <!-- 无收货地址时显示 -->
            <!-- <div class="a-add"><i class="iconfont icon-add"></i>新建收货地址</div> -->
            <!-- 有收货地址时显示 -->
            <div class="a-info">
                <div class="i-base">李少群&nbsp;&nbsp;15711559465</div>
                <div class="i-det">福建省厦门市思明区高雄路18号通达大厦203</div>
            </div>
        </div>
        <div class="m-item">
            <div class="i-yen"><label>&yen;</label><span id="price">499</span></div>
            <div class="i-tle">"不错不错，支持一下~~"</div>
            <div class="i-con">
                获得价值599元的ENERGIZER专业跑鞋1双（可自选配色定制方案，自选流行符号），送功能T + 运动腰包 + 运动袜
            </div>
        </div>
        <div class="m-bar selected">请选择：<label class="xm">鞋码</label>&nbsp;<label class="psfa">配色方案</label></div>
        <div class="m-bar selected" id="j-option">请选择：<label class="lxys">流行元素</label>&nbsp;<label class="zxwz">展现位置</label></div>
        <div class="m-bar">
            <span class="b-name">购买数量</span>
            <div class="b-spinner">
                <a href="javascript:;" class="s-btn del">-</a>
                <input type="tel" class="s-input" value="1" readonly>
                <a href="javascript:;" class="s-btn add">+</a>
            </div>
        </div>
        <div class="m-read">
            <i class="icon-check"></i>已阅读并同意<a href="javascript:;">《支持者协议》</a>
        </div>
    </section>
    <footer class="m-btn-container flex">
        <div class="c-left flex1">
            总金额：<span class="l-tol" id="total">499</span>
        </div>
        <div class="c-right">
            <div class="m-btn pay">微信支付</div>
        </div>
    </footer>
</div>
</body>

<%-include("../../ejs/_js.ejs", {env: env}) %>
<script type="text/javascript" src="../../lib/mobileSelect.min.js"></script>
<script type="text/javascript">
$(function () {
    var $price = $("#price");
    var $total = $("#total");

    var price = parseFloat($price.text());

    //- 加减控件
    $('.b-spinner').m_delegate('.s-btn', function () {
        var $this = $(this);
        var $input = $this.siblings('input');
        var num = parseInt($input.val());

        if ($this.hasClass('del')) {
            if (num == 1) return;
            num -= 1;
        } else {
            num += 1;
        }

        $input.val(num);

        //- 保留两位小数
        // var total = parseFloat(num * price).toFixed(2);
        var total = Math.floor(parseFloat(num * price) * 100) / 100;
        $total.text(total);
    });

    //- 查看地址列表
    $('.m-address').m_touch(function() {
        jump.view('address/list.html');
    });

    //- 选择流行元素、展现位置
    new MobileSelect({
        trigger: '#j-option',
        title: '',
        wheels: [
            { data: ['lowpoly风', '太空舱', '原点斑纹'] },
            { data: ['鞋底', '鞋底侧', '鞋跟'] }
        ],
        position: [0, 0],
        transitionEnd: function(indexArr, data){
            //console.log(data);
        },
        callback: function(indexArr, data){
            console.log(data);
        }
    });

});
</script>

</html>
